<template>
  <div>
    <div class="showGoodsContainer" v-if="goodsInfo.directlyList">
      <van-sticky :offset-top="44">
        <div class="selectWrap">
          <div class="select_1 select_item" @click="changeSelectId(0)" :class="{select_active:selectId === 0}">综合</div>
          <div class="select_2 select_item" @click="changeSelectId(1)">
            <span :class="{select_active:selectId === 1}">价格</span>
            <div class="arrow">
              <van-icon name="arrow-up" :class="{active_arrow:sortMin}" class="arrow_item arrow_up"/>
              <van-icon name="arrow-down" :class="{active_arrow:sortMax}" class="arrow_item arrow_down"/>
            </div>
          </div>
          <div class="select_3 select_item" @click="changeSelectId(2)" :class="{select_active:selectId === 2}">分类</div>
        </div>
      </van-sticky>
      <!-- 遮罩层-->
      <van-overlay v-if="isShowMaskModule" class-name="maskWrap" :show="showMask" @click="showMask = false">
        <div class="main" @click.stop>
          <!-- 价格排序的显示-->
          <div v-show="isShowPriceWrap" class="priceContainer">
            <div class="priceWrap">
              <div class="price">
                <span>筛选</span>
                <input type="text"
                       :class="{active_input:active_input===1}"
                       @focus="active_input=1"
                       @blur="active_input=0"
                       v-model="priceMin" placeholder="最低价">
                <span>—</span>
                <input type="text"
                       :class="{active_input:active_input===2}"
                       @focus="active_input=2"
                       @blur="active_input=0"
                       v-model="priceMax"
                       placeholder="最高价">
              </div>
            </div>
            <div class="sort">
              <span>排序</span>
              <div class="min" :class="{active_sort:sortMin}" @click="changeActiveSort(true)">从低到高</div>
              <div class="max" :class="{active_sort:sortMax}" @click="changeActiveSort(false)">从高到低</div>
            </div>
            <div class="splitLine"></div>
            <div class="btn">
              <div @click="showMask=false">取消</div>
              <div @click="sort(true)">确定</div>
            </div>
          </div>
          <!--  分类的显示-->
          <ul v-show="isShowClassify" class="classifyContainer">
            <li v-for="cate in goodsInfo.categoryL1List" :class="{active_cate:cate.id ===categoryId }" :key="cate.id"
                @click="categoryId=cate.id">{{ cate.name }}
            </li>
          </ul>
        </div>
      </van-overlay>

      <!--展示模块-->
      <div class="showContainer">
        <div class="showModulesWrap">
          <div class="show_item">
            <div class="goodsWrap">
              <lazy-component class="goods" v-for="(goods,index) in goodsInfo.directlyList" :key="index">
                <div class="goods" @click="$router.push(`/detail?skuId=${goods.id}`)">
                  <div class="goods_img">
                    <img :src="goods.listPicUrl" alt="">
                    <div class="goods_desc">{{ goods.simpleDesc }}</div>
                    <div v-if="goods.listPromBanner" class="sale_desc">
                      <div class="sale_desc_left">
                        <div>{{ goods.listPromBanner.promoTitle }}</div>
                        <div>{{ goods.listPromBanner.promoSubTitle }}</div>
                      </div>
                      <div class="sale_desc_right">{{ goods.listPromBanner.content }}</div>
                    </div>
                  </div>
                  <p class="goods_name">{{ goods.name }}</p>
                  <div class="goods_price">
                    <p class="curr_price">￥{{ goods.retailPrice }}</p>
                    <!--                  <p class="pre_price">￥{{ goods.counterPrice }}</p>-->
                  </div>
                  <div v-if="goods.itemTagList" class="des">
                    <p v-for="(item,index) in goods.itemTagList" :key="index">{{ item.name }}</p>
                  </div>
                </div>
              </lazy-component>
              <div v-if="goodsInfo.directlyList.length/2 !==0" class="goods">
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
    <div class="loading_and_notFound"  v-else>
      <van-loading v-if="isShowLoading"  type="spinner" color="#1989fa" size="50px" text-size="30px">正在加载中...</van-loading>
      <van-empty
          v-else
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/empty-image-search.png"
          description="您寻找的商品还未上架"
      />
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {Toast} from "vant";

export default {
  name: "ShowGoods",

  data() {
    return {
      categoryId: 0,// 点击时选择分类时保存分类ID
      priceMin: '',// 最低价
      priceMax: '',// 最高价
      selectId: 0,// 切换排序方式
      sortMin: false,// 从低到高排序  控制从低到高变红
      sortMax: false,// 从高到低排序  控制从高到低变红
      
      showMask: false,// 是否显示遮罩层
      active_input: 0,// 控制2个input获取焦点边框变红 1是最低价变红，2是最高价变红 0都不变色
      isShowLoading: false,// 是否在搜寻的时候显示loading加载图
    };
  },

  computed: {
    ...mapState({
      goodsInfo: state => state.search.goodsInfo,// 确认搜索后请求回来的数据
    }),
    // 是否显示分类
    isShowClassify() {
      return this.selectId === 2;
    },
    //是否显示价格排序
    isShowPriceWrap() {
      return this.selectId === 1;
    },
    //是否显示遮罩模块
    isShowMaskModule() {
      return this.selectId !== 0;
    },
  },
  methods: {
    changeSelectId(selectId) {
      //如果传进来的是0的话，代表综合排序 发送请求重新排序，与上次id不同综合排序发送请求
      // categoryId不等于0是控制如果上你是分类下的全部，直接展示，不用重新请求
      if (selectId === 0 && selectId !== this.selectId&&(this.categoryId!==0||this.sortMin||this.sortMax)) {
        // console.log(this)
        const {categoryId} = this
        const keyword = this.$route.query.keyword
        this.$store.dispatch('getSearchShowGoodsInfo', {categoryId, keyword})
        this.resetData() //重置data中的数据
      }

      //显示遮罩，
      this.showMask = true
      this.selectId = selectId

    },
    //控制价格mask中从低到高 从高到低的显示状态
    changeActiveSort(flag) {
      if (flag) {
        //flag是true说明是从低到高
        this.sortMin = !this.sortMin
        this.sortMax = false
      } else {
        this.sortMax = !this.sortMax
        this.sortMin = false
      }
    },
    //点击确定，开始排序
    sort(flag) {
      this.showMask = false //先关闭遮罩
      const {sortMin, sortMax, categoryId} = this
      const min = parseInt(this.priceMin) || -1  //最低价
      const max = parseInt(this.priceMax) || -1 //最高价
      const keyword = this.$route.query.keyword
      // eslint-disable-next-line no-unused-vars

      // 如果俩都是false 直接返回不排序 flag表明这方法是在价格中点击确定是调用的
      if (!(sortMin || sortMax) && flag) {
        Toast('请选择排序方式');
        return
      }
      // descSorted ture是从高到底
      let descSorted, sortType, matchType
      if (!sortMin && sortMax) {
        descSorted = true
      }
      if (sortMin && !sortMax) {
        descSorted = false
      }
      if (sortMin || sortMax) {
        sortType = 1
        matchType = 1
      }
      const params = {min, max, categoryId, keyword, descSorted, sortType, matchType}
      this.isShowLoading=true
      this.$store.dispatch('getSearchShowGoodsInfo', params)
        .then(() => {
          this.isShowLoading=false
        })
    },

    // 初始化搜索参数
    resetData(){
      Object.assign(this._data,this.$options.data())
    }

  },

  watch: {
    $route: {
      immediate:true,
      deep: true,
      handler(value) {
        if (value.query.keyword) {
          this.isShowLoading=true
          this.$store.dispatch('getSearchShowGoodsInfo', value.query)
            .then(() => {
              this.isShowLoading=false
            })
        }

      }
    },
    categoryId() {
      // categoryId一旦变化，关闭遮罩
      // this.showMask = false
      //发送请求
      // const keyword = this.$route.query.keyword
      this.sort()
      // this.$store.dispatch('getSearchShowGoodsInfo', {keyword, categoryId: newValue})
    },
  },
}
</script>

<style lang="less" scoped>

.showGoodsContainer {
  width: 100%;
  //height: 90%;
  //background-color: #fff;

  //选择
  .selectWrap {
    background-color: #FAFAFA;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 375px;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #ccc;

    .select_item {
      width: 100px;
      text-align: center;
    }

    .select_2 {
      display: flex;
      align-items: center;
      justify-content: center;

      .arrow {
        height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        color: #999999;

        .arrow_up {
          transform: translateY(2px) scale(0.8);
        }

        .arrow_down {
          transform: translateY(-2px) scale(0.8);
        }

        .active_arrow {
          color: #dd1a21;
        }

      }
    }

    .select_active {
      color: #dd1a21;
    }


  }

  //这遮罩层

  .maskWrap {
    height: 100%;
    margin-top: 83px;

    .main {
      height: 168px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 20px;
      //background-color: pink;
      overflow: hidden;
      background-color: #ffffff;
      //价格排序的框框
      .priceContainer {
        //价格
        .priceWrap {
          display: flex;
          align-items: center;
          width: 375px;
          font-size: 14px;
          color: #333333;
          padding-top: 20px;

          span {
            //display: flex;
            width: 28px;
            margin: 0;
            height: 28px;
            line-height: 28px;
            text-align: center;
          }

          span:nth-child(2) {
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #7f7f7f;
          }

          input {
            width: 135px;
            height: 28px;
            box-sizing: border-box;
            border-radius: 2px;
            border: 1px solid #7f7f7f;
            text-align: center;
            margin: 0 10px;

            &.active_input {
              border: 1px solid #dd1a21;
            }
          }
        }

        // 排序方式
        .sort {
          margin-top: 20px;
          width: 100%;
          display: flex;
          align-items: center;

          span {
            //width: 50px;
            margin: 0;
            //height: 28px;
            line-height: 28px;
            //text-align: center;
            font-size: 14px;
          }

          .min, .max {
            width: 104px;
            height: 28px;
            font-size: 14px;
            color: #333333;
            text-align: center;
            line-height: 28px;
            box-sizing: border-box;
            border: 1px solid #7f7f7f;
            background-color: #fff;
            margin: 0 10px;
          }

          .active_sort {
            color: #dd1a21;
            border: 1px solid #dd1a21;
          }


        }

        //分割线
        .splitLine {
          width: 375px;
          height: 1px;
          border-top: 1px solid #7f7f7f;
          transform: translateX(-20px);
          margin-top: 20px;
        }

        //取消，确定按钮
        .btn {
          width: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          font-size: 14px;

          div {
            width: 50%;
            height: 52px;
            text-align: center;
            line-height: 52px;
            box-sizing: border-box;
          }

          div:nth-child(2) {
            box-sizing: border-box;
            border-left: 1px solid #7f7f7f;
            color: #dd1a21;
          }

        }
      }

      //分类的框框
      .classifyContainer {
        width: 100%;
        //background-color:skyblue;
        display: flex;
        height: 165px;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 30px 0 15px;
        overflow-x: auto;

        li {
          height: 28px;
          margin: 0 20px 20px 0;
          padding: 0 9px;
          font-size: 14px;
          line-height: 28px;
          box-sizing: border-box;
          border: 1px solid #7f7f7f;

          &.active_cate {
            color: #dd1a21;
            border: 1px solid #dd1a21;
          }
        }

      }
    }
  }

  // 展示模块
  .showContainer {
    width: 375px;
    background-color: #ffffff;
    padding-bottom: 50px;
    padding-top: 10px;
    //轮播图

    // 展示模块
    .showModulesWrap {
      //margin-top: 10px;
      width: 375px;


      .show_item {
        width: 375px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        //margin-top:10px ;
        background-color: #ffffff;


        .goodsWrap {
          width: 375px;
          //height: 500px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-around;
          align-content: flex-start;
          //background-color: skyblue;
          //padding:0  20px;


          .goods {
            //background-color: pink;
            height: 284px;
            width: 172.5px;

            .goods_img {
              position: relative;
              width: 172.5px;

              img {
                width: 172.5px;
                height: 172.5px;

              }

              .goods_desc {
                background: #f1ece2;
                color: #9f8a60;
                font-size: 12px;
                height: 24px;
                line-height: 24px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1; /* * 多行文本溢出... */
                overflow: hidden;
              }

              .sale_desc {
                height: 24px;
                width: 100%;
                position: absolute;
                bottom: 0;
                display: flex;
                background-color: #ED6D2A;

                .sale_desc_left {
                  flex: 1.5;
                  display: block;isplay: flex;
                  transform: translate(1px, -4px);
                  height: 28px;
                  flex-direction: column;
                  font-size: 12px;
                  color: #ffffff;
                  background-color: #ED6D2A;
                  border-top-right-radius: 10px;

                  div {
                    padding-left: 2px;
                    line-height: 15px;
                    text-align: center;
                    font-weight: bold;
                  }
                }

                .sale_desc_right {
                  flex: 2;
                  font-size: 12px;
                  color: #ffffff;
                  background-color: #F38245;
                  line-height: 24px;
                  padding-left: 4px;

                }
              }
            }

            .goods_name {
              font-size: 14px;
              margin-top: 8px;
              color: #333333;
            }

            .goods_price {
              margin-top: 5px;
              display: flex;
              align-items: center;

              .curr_price {
                color: #dd1a21;
                font-size: 16px;
              }

              .pre_price {
                color: #999999;
                font-size: 12px;
                text-decoration-line: line-through;
                margin-left: 4px;
              }
            }

            .des {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              margin-top: 5px;

              p {
                text-align: center;
                line-height: 15px;
                font-size: 12px;
                height: 15px;
                color: #dd1a21;
                background: hsla(0, 0%, 100%, .9);
                border: 1px solid #dd1a21;
                border-radius: 7.5px;
                padding: 0 2px;
              }
            }


          }


        }


      }


    }
  }


}

// loading加载与找不到
.loading_and_notFound{
  margin-top: 50%;
  margin-right:50%;
  text-align: center;
  transform:translate(50%,0);
  van-loading{
    width: 200px;
  }
  ::v-deep .van-empty__description{
    width: 150px;
    text-align: center;
  }
}
</style>
